<template>
	<view>
		
		<!--删除联系人 -->
		<view class="content">
			<!-- <view class="search-form round">
				<input type="text"
				maxlength="12" 
				confirm-type="search" 
				placeholder-style="color: #ccc" 
				placeholder="搜索好友" 
				@search="serachSubmit"
				@custom="serachSubmit" 
				v-model="keyword" 
				height="70" 
				focus />
			</view> -->
			
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<image :src="item.selected ? buySelectedImage : buyImage"
				class="buyImage" @click="changeRadio(index)" 
				></image>
				
				<image :src="item.avatar"
				class="nicknameImage"
				></image>
				
				<view class="nickname text-cut">{{item.nickname || ''}}</view>
			</view>
		</view>
		
		<!-- 更多 -->
		<uni-load-more :status="status" :content-text="contentText" />
		
		<view class="fixed-btn">
			<view class="btn" @click="submit()">完成</view>
		</view>
		
	</view>
	
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			user_ids:[],
			name:'',
			buyImage: '/static/images/buyNotSeclect.png',
			buySelectedImage: '/static/images/buySeclected.png',
			
			dataList:[
				// {
				// 	id:10,
				// 	avatar:'/static/images/default/screen_icon_new.png',
				// 	nickname:'昵称',
				// 	selected:true,
				// }
			],
			keyword:'',
			group_id: 0,
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'noMore',//noMore loading
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载...',
				contentnomore: ''
			}
			
		}
	},
	// 触底加载更多
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.getList();
		}
	},
	onLoad(option) {
		if(option.group_id){
			this.group_id = option.group_id;
		}
		
		this.getList();
	},
	methods: {
		getList(value){
			
			let that = this;
			this.status = 'loading';
			uni.request({
				url: '/chat/groupuserlist',
				data: {
					page: that.current_page,
					id: this.group_id,
					//keywords: this.keyword,
				},
				success: res => {
					res = res.res;
					if (res.code === 1) {
						res.data.data.forEach(function(value,index){
							 value.selected = false;
						});
						
						that.dataList = [...that.dataList, ...res.data.data];
						that.current_page = res.data.current_page; //当前页码
						that.last_page = res.data.last_page; //总页码
						that.status = 'more';
					}
				}
			});
		},
		submit(){
			let _this = this;
			
			this.dataList.forEach(function(value,index){
				if(value.selected){
					_this.user_ids.push(value.id);
				}
			})
			
			if(_this.user_ids.length === 0){
				this.$wanlshop.msg('请选择删除的联系人');
				return false;
			}
			
			uni.request({
				url: '/chat/groupuserdel',
				data: {
					id: this.group_id,
					user_ids: this.user_ids.join(','),
				},
				success: res => {
					res = res.res;
					if (res.code === 1) {
						this.$wanlshop.msg('删除成功');
						uni.reLaunch({
							url:'/pages/new/chatgroup'
						})
					}else{
						this.$wanlshop.msg(res.msg);
					}
				}
			});
			
		},
		changeRadio(index){
			if (this.dataList[index].selected) {
	            this.dataList[index].selected = false;
	        }
	        // 未选中状态下点击
	        else {
	            this.dataList[index].selected = true;
	        }
		},
		serachSubmit() {
			let _this = this
			
			let searchVal =  _this.keyword;
			
			if (searchVal.trim().length) {
				_this.current_page = 1;
				_this.dataList = [];
				_this.getList();
			} else {
				uni.showToast({
					icon: 'none',
					title: '请输入您想搜索的内容',
					success() {
						_this.keyword = '';
						_this.current_page = 1;
						_this.dataList = [];
						_this.getList();
					}
				})
			}
		},
	}
}	
</script>

<style lang="scss" scoped>
.search-form{
	// background-color: #F7F7F7;
	// margin-bottom: 24rpx;
	// height: 70rpx;
	// display: flex;
	// align-items: center;
	// padding-left: 32rpx;
}

.content{
	background: #ffffff;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	padding: 24rpx;
	height: 82vh;
	overflow-y: auto;
}

.color-search{
	color: #C7C7C7;
	margin-right: 20rpx;
}

.nicknameImage{
	width: 70rpx;
	height: 70rpx;
	border-radius: 50%;
	margin-left: 17rpx;
	margin-right: 17rpx;
}

.nickname{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
	width: 556rpx;
	border-bottom: 1rpx solid #EBEBEB;
	padding-bottom: 42rpx;
	padding-top: 42rpx;
}
.item{
	display: flex;
	align-items: center;
}

.btn{
	width: 702rpx;
	height: 88rpx;
	background: #9C3728;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}

.fixed-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 60rpx;
	left: 24rpx;
	z-index: 9;
}

.buyImage{
	width: 40rpx;
	height: 40rpx;
}
</style>